<template>
	<view class="page">
		<view class="flex align-center justify-between margin-top padding-lr">
			<view class="flex align-center">
				<u-icon name="arrow-left" size="24rpx" color="#999" @click="getYestoday"></u-icon>
				<u-text margin="0 20rpx" color="#333" size="34rpx" :text="calendarDate" @click="showCalendar = true"></u-text>
				<u-icon name="arrow-right" size="24rpx" color="#999" @click="getNextDay"></u-icon>
			</view>
			<!-- <view class="flex align-center">
				<u-icon name="calendar" size="36rpx" :color="showCalendar ? '#FFA40C' : '#333'"></u-icon>
				<u-text margin="0 0 0 10rpx" :text="calendarDate" :color="showCalendar ? '#FFA40C' : '#333'"
					size="28rpx"></u-text>
			</view> -->
		</view>
		<view class="main">
			<view class="subject-list">
				<view class="subject-item">
					<view class="flex align-center">
						<view class="flex-1 flex align-center">
							<image style="width:36rpx;height:36rpx;" :src="homeworkDetail.icon" mode="aspectFit"></image>
							<u-text margin="0 0 0 10rpx" :text="homeworkDetail.name" size="32rpx" color="#333333"></u-text>
						</view>
					</view>
					<view v-for="(item, index) in homeworkDetail.content" :key="index">
						<view class="homework-item">
							<u-text :text="`[${index + 1}] ${item.title}`" size="28rpx" color="#333"></u-text>
						</view>
						<view class="flex align-center">
							<image v-for="image in item.image" :key="image" :src="image" mode="aspectFit"
								@click="previewImage(image)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
// 内容中需要显示作业完成的详情
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import dayjs from 'dayjs'
const calendarDate = ref('10月02日');
const homeworkDetail = ref({
	id: 1,
	name: '数学',
	icon: '/static/image/img-math.png',
	content: [
		{
			title: '计算',
			image: ['/static/image/img-math.png'],
		},
		{
			title: '应用题',
		}
	]
},);
onLoad((options) => {
	calendarDate.value = dayjs().format('YYYY-MM-DD')
})
const previewImage = (image) => {
	uni.previewImage({
		urls: [image],
	});
};

// 昨天
const getYestoday = () => {
	console.log('昨天')
	calendarDate.value = dayjs(calendarDate.value).subtract(1, 'day').format('YYYY-MM-DD')
}

// 明天
const getNextDay = () => {
	console.log('明天')
	calendarDate.value = dayjs(calendarDate.value).add(1, 'day').format('YYYY-MM-DD')
}

const getMinDate = () => {
	return dayjs().subtract(5, 'month').format('YYYY-MM-DD')
}
</script>

<style>
.subject-item {
	background: white;
	border-radius: 32rpx;
	padding: 30rpx;
	box-sizing: border-box;
	align-items: center;
	margin-bottom: 20rpx;
}

.homework-item {
	background: #F7F7F7;
	border-radius: 20rpx;
	padding: 30rpx;
	box-sizing: border-box;
	margin-top: 20rpx;
}

.btn-detail {
	width: 160rpx;
	height: 54rpx;
	background: #FFF1D9;
	border-radius: 27rpx;
	color: #FFA40C;
	margin-top: 20rpx;
	text-align: center;
	line-height: 54rpx;
	font-size: 28rpx;
}
</style>